<template>
	<view class="status_bar"></view>
	<view class="container">
		<view class="aptview" style="position: relative;">
			<view class="title">
				<view class="name">
					<text>{{$t("monitor.AirMonitoring")}}
					</text>
					<br />
					<text class="city">City: {{location.city}}</text>
					<br />
					<text class="city">Site: {{location.pos}}</text>
				</view>
				<view class="location">
					<text @click="gotoCityPage()">
						<uni-icons style="color: white;font-weight: bold;" type="location" size="35"></uni-icons></text>
				</view>
				<!-- {{location.pos}} -->
			</view>
			<uni-row class="aptSubject">
				<uni-col :span="12">
					<l-circle :current.sync="0" :percent="apt.aqi*100/500" dashboard trailWidth="16" strokeWidth="16"
						trailColor="#ffffff" :strokeColor="skColor">
						<text :style="{'color':labelColor}"
							style="font-size: 30px;font-weight: bold;">{{apt.aqi}}</text>
					</l-circle>
				</uni-col>
				<uni-col :span="12" style="text-align: left;">
					<view class="aptStatus" :style="{'background-color':labelColor}" style="margin-bottom: 10px;">
						<text style="font-weight: bold;">{{status}}\n</text>
					</view>
					<view>
						<text style="font-weight: bold;">{{$t("monitor.TopContaminants")}}：<br />
							{{apt.primarypollutants}}\n</text>
					</view>
					<text>{{apt.datetime}}</text>
				</uni-col>
			</uni-row>
			<view class="aptDetail">
				<uni-row>
					<uni-col :span="8">
						<view class="param">
							<view class="data">
								<text class="apt">{{apt.pm25}}</text>
								<view class="line" />
							</view>
							<view style="margin-top: 10px;">
								<text class="aptName">PM2.5</text>
							</view>
						</view>
					</uni-col>
					<uni-col :span="8" style="text-align: center;">
						<view class="param">
							<view class="data">
								<text class="apt">{{apt.pm10}}</text>
								<view class="line" />
							</view>
							<view style="margin-top: 10px;">
								<text class="aptName">PM10</text>
							</view>
						</view>
					</uni-col>
					<uni-col :span="8" style="text-align: center;">
						<view class="param">
							<view class="data">
								<text class="apt">{{apt.co2}}</text>
								<view class="line" />
							</view>
							<view style="margin-top: 10px;">
								<text class="aptName">CO2</text>
							</view>
						</view>
					</uni-col>
				</uni-row>
				<uni-row>
					<view class="pro" />
				</uni-row>
				<uni-row style="margin-top: 10px;">

					<uni-col :span="8">
						<view class="param">
							<view class="data">
								<text class="apt">{{apt.co}}</text>
								<view class="line" />
							</view>
							<view style="margin-top: 10px;">
								<text class="aptName">CO</text>
							</view>
						</view>
					</uni-col>
					<uni-col :span="8" style="text-align: center;">
						<view class="param">
							<view class="data">
								<text class="apt">{{apt.temperature}}</text>
								<view class="line" />
							</view>
							<view style="margin-top: 10px;">
								<text class="aptName">{{$t("monitor.Temperature")}}</text>
							</view>
						</view>
					</uni-col>
					<uni-col :span="8" style="text-align: center;">
						<view class="param">
							<view class="data">
								<text class="apt">{{apt.humidity}}</text>
								<view class="line" />
							</view>
							<view style="margin-top: 10px;">
								<text class="aptName">{{$t("monitor.HumidityLevel")}}</text>
							</view>
						</view>
					</uni-col>
				</uni-row>
			</view>
		</view>
		<view>
			<uni-notice-bar class="noticeBar" show-icon scrollable :text="notice" speed="20"/>
		</view>
		<view class="">
			<view class="bg">
				<text>24小时监测图</text>
			</view>
			<qiun-data-charts type="area" :opts="opts" :chartData="chartData1" :ontouch="true"
				style="background-color: white;" />
		</view>
		<view class="adv">
			<image src="../../static/adv/adv.png"></image>
		</view>

		<view>
			<!-- 提示信息弹窗 -->
			<uni-popup ref="message" type="message">
				<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import {
		setSiteId,
		getSiteId
	} from '@/common/tools.js'
	import {
		aptSwitch
	} from '@/common/apt.js'
	export default {
		data() {
			let _width = uni.upx2px(350);
			return {
				notice: "",
				modelValue: 20,
				target: 20,
				skColor: "#ffffff",
				labelColor: "#ffffff",
				gaugeOption: { //定义参数
					id: 'gaugeId0',
					title: "AQI",
					value: 75.8,
					status: false,
					axisTickLength: 2 //该属性与axisTick互斥，存在axisTickLength并大于0，axisTick就无效
				},
				tips: "安全",
				apt: {
					aqi: 0,
					co: 0,
					co2: 0,
					pm10: 0,
					pm25: 0,
					temperature: 0,
					humidity: 0,
					datetime: "",
				},
				status: "良",
				location: {
					id: "",
					city: "wanxiang",
					pos: "xx",
				},
				chartData1: {},
				opts: {
					color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4',
						'#ea7ccc'
					],
					padding: [20, 0, 20, 0],
					enableScroll: true,
					legend: {},
					xAxis: {
						disableGrid: true,
						scrollShow: true,
						itemCount: 8
					},
					yAxis: {
						data: [{
							position: 'left',
							min: 0
						}, ],
						gridType: "dash",
						dashLength: 2
					},
					extra: {
						area: {
							type: "curve",
							opacity: 0.2,
							addLine: true,
							width: 2,
							gradient: true,
							activeType: "hollow"
						}
					}
				},
			}
		},
		onReady() {
			// this.test();
			this.getPosition();
			console.log(getSiteId());
			// this.getAptData(); 

			setTimeout(() => {
				// 	// let
				let res = {
					categories: [],
					series: [{
						name: "aqi",
						data: []
					}]
				};
				this.chartData1 = JSON.parse(JSON.stringify(res));
			}, 500);
		},

		methods: {
			
			getPosition() {
				console.log(123);
				uni.getLocation({
					type: 'wgs84',
					geocode: true,
					success: (res) => {
						console.log("location", res);
						// if (res.code == 1)
						this.getLocation(res.longitude, res.latitude);
					},
					fail: (res) => {
						console.log("location", res);
					}
				})
			},

			getDaydata(siteId) {
				let res1 = this;
				this.$http.get(this.$api.getdaydata.url + "/" + siteId, {}).then(res => {
					if (res.code == 1) {
						 console.log(res.result.value); 
						res1 = res;
						setTimeout(() => {
							let chartData = {
								categories: res1.result.time,
								series: [{
									name: "aqi",
									data: res1.result.value
								}]
							};
							this.chartData1 = JSON.parse(JSON.stringify(chartData));
						}, 100);
					}
				});
				// this.$($this.$api,)
			},
			getLocation(longitude, latitude) {
				this.$request(this.$api.location, {
					longitude: longitude,
					latitude: latitude
				}).then(res => {
					if (res.code == 1) {
						console.log(res.result.name);
						this.location.city = res.result.province;
						this.location.pos = res.result.name;
						setSiteId(res.result.id)
						this.getAptData(res.result.id);
						this.getDaydata(res.result.id);
					}
				}).catch(res => {
					console.log(res);
				});
			},
			
			messageToggle(type, message) {
				this.msgType = type
				this.messageText = message;
				this.$refs.message.open()
			},
			
			getAptData(siteid) {
				this.$http.get(this.$api.aptData.url + "/" + siteid, {}).
				then(res => {
					console.log(res);
					this.apt = res.result;
					this.gaugeOption.value = res.result.aqi;

					console.log(this.apt.aqi);
					this.labelColor = aptSwitch(this.apt.aqi).color;
					this.skColor = this.labelColor;
					console.log(aptSwitch(this.apt.aqi))
					//状态
					let result = aptSwitch(this.apt.aqi)
					this.status = this.$t(result.text)
					
					this.getNotice(siteid);
				});
			},

			getNotice(siteid) {
				this.$http.get(this.$api.notice.url + "/" + siteid, {}).then(
					res => {
						this.notice = res.result.content;
					}
				);
			},

			gotoCityPage() {
				let pthis = this;
				uni.navigateTo({
					url: "/pages/assist/city",
					events: {
						acceptDataFromOpenedPage: data => {
							// console.log("data123" + data.data);
							this.location.id = data.id;
							this.location.city = data.name;
							this.location.pos = data.phone;

							// setSiteId(String.valueof(data.id));
							this.getAptData(data.id);
							this.getDaydata(data.id);
							// console.log(data);
						}
					},
					success: function(res) {
						console.log(res);
						//res.eventChannel.emit('acceptDataFromOpenedPage',{data:res});
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		.aptview {
			background-image: url("../../static/monitor/bg.png");
			background-size: cover;
			height: 1000upx;
			min-height: 320px;
			width: 100%;

			text {
				color: white;
			}

			.title {
				// background-color: #0000E530;
				width: 100%;
				position: relative;
				text-align: center;
				height: 160upx;

				.name {
					position: absolute;
					text-align: center;
					width: 100%;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);

					text {
						width: 100%;
						color: white;
						font-size: 26px;
						font-weight: bold;
					}

					.city {
						font-size: 15px;
					}
				}

				.location {
					position: absolute;
					text-align: center;
					right: 10rpx;
					top: 50%;
					transform: translate(0%, -50%);

					text {
						font-size: 35px;
					}
				}
			}

			.aptSubject {
				min-height: 170px;
				height: 300upx;
				max-height: 300px;
				padding-top: 70upx;
			}

			.aptDetail {
				height: 350upx;
				outline: 0.3rem solid #ffffff25;
				background-color: #ffffff30;
				padding-top: 20px;
				padding-bottom: 10px;
				border-radius: 10px;
				margin-left: 28upx;
				width: 700upx;

				.param {

					// width: 190upx;
					// background-color: #0000E550;
					.data {
						width: 40px;
						height: 40px;
						line-height: 30px;
						margin: 0px auto;
						border-radius: 30px;
						background-color: #ffffff25;
						outline: 0.3rem solid #ffffff30;

						text {
							font-size: 15px;
						}

						.line {
							margin: 0px auto;
							width: 15px;
							border: 2px solid green;
						}
					}
				}
				
				.pro {
					margin: 0px auto;
					width: 90%;
					border: 1px solid #E6E6FA;
					margin-top: 10px;
					margin-bottom: 10px;
				}

				.aptName {
					/* color: white; */
					font-weight: bold;
					font-size: 14px;
					color: white;
				}
			}
		}
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.monitorData {
		outline: 0.3rem solid #ffffff30;
		background-color: #ffffff30;
		padding-top: 10px;
		padding-bottom: 10px;
		border-radius: 10px;
		width: 200px;
	}

	.bg {
		background-color: white;
		padding-top: 10px;
		padding-bottom: 10px;
		margin-bottom: 3px;

		text {
			margin-left: 10px;
			font-weight: bold;
		}
	}

	.aptview {}

	.uni-col {
		text-align: center;
	}

	.apt {
		font-size: 18px;
		color: white;
	}



	.noticeBar {
		background: #fff;
	}

	.tips {
		width: 100%;
		background-color: white;
		height: 30px;
		line-height: 30px;
		padding-left: 10px;
		border-radius: 20px;
	}

	.aptStatus {
		background-color: aliceblue;
		width: 80px;
		border-radius: 30px;
		padding: 5px;
		text-align: center;
	}

	.unit {
		color: white;
	}

	.adv {
		margin: 3px;
	}

	.adv image {
		width: 100%;
	}

	.uni-navbar {
		padding-top: var(--status-bar-height);
	}
</style>